﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--suppress ALL-->
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ERP仓储管理系统</title>
<link th:href="@{/css/style.css}" rel="stylesheet" type="text/css" />
<script language="JavaScript" th:src="@{/js/jquery.js}"></script>
<script th:src="@{/js/cloud.js}" type="text/javascript"></script>

<script language="javascript">
	$(function(){
    $('.loginbox').css({'position':'absolute','left':($(window).width()-692)/2});
	$(window).resize(function(){  
    $('.loginbox').css({'position':'absolute','left':($(window).width()-692)/2});
    })  
});
</script> 

</head>

<body style="background-color:#df7611; background-image:url(images/light.png); background-repeat:no-repeat; background-position:center top; overflow:hidden;">


    <div id="mainBody">
      <div id="cloud1" class="cloud"></div>
      <div id="cloud2" class="cloud"></div>
    </div>  


	<div class="logintop">    
        <span>ERP仓储管理系统</span>   
    </div>
    
    <div class="loginbody">
    
    <span class="systemlogo"></span> 
       
    <div class="loginbox loginbox1">
        <form th:action="@{/users/login}" method="post">
            <ul>
                <li><input name="utelephone" type="text" class="loginuser" placeholder="手机号码" onclick="JavaScript:this.placeholder='';this.value=''"/></li>
                <li><input name="upassword" type="password" class="loginpwd" placeholder="密码" onclick="JavaScript:this.placeholder='';this.value=''"/></li>
                <li class="yzm">
                    <span><input name="verifyCode" type="text" value="验证码（区分大小写）" onclick="JavaScript:this.value=''"/></span><cite></cite>
                </li>
                <li><input name="" type="button" class="loginbtn" value="登录" /><label><input name="" type="checkbox" value="" checked="checked" />记住密码</label><label><a href="#">忘记密码？</a></label></li>
            </ul>
        </form>
    </div>
    
    </div>
    
    
    <div class="loginbm">版权归南昌朝腾科技所有，仅供学习交流，勿用于任何商业用途</div>
	
    
</body>

</html>
<script>
	$(function () {
		let canvas = createCanvas();
		$("cite").text(canvas);

		$(".loginbtn").click(function () {
			if (verifyLogin()) {
				$("form").submit();
			}

		})
	})

	let codeSequence = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J',
		'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W',
		'X', 'Y', 'Z', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9',
		'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm',
		'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z',
		'0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];


	function createCanvas() {
		let canvasStr = '';
		for (let i=0;i<6; i++) {
			const str = codeSequence[Math.floor(Math.random() * codeSequence.length)];
			canvasStr += str;
		}
		return canvasStr;
	}
	
	function verifyLogin() {
		let utelephone = $("input[name='utelephone']").val();
		let upassword = $("input[name='upassword']").val();
		let verifyCode = $("input[name='verifyCode']").val();
		let cite = $("cite").text();

		if (utelephone == "手机号码") {
			alert("请输入手机号码！");
			return;
		}
		if (upassword == "密码") {
			alert("请输入密码！");
			return;
		}

		if (verifyCode != cite) {
			alert("验证码错误！");
			location.reload();
			$("input[type=submit]").preventDefault();
		} else {
			return true;
		}
	}
</script>
